Skip to content

refactor: add theme attribute to context menu to allow to scope styles #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
javier-godoy merged 1 commit into from
Jan 15, 2026
Merged

refactor: add theme attribute to context menu to allow to scope styles #19

javier-godoy merged 1 commit into from
Jan 15, 2026

Conversation

@paodb
Copy link
Member

@paodb paodb commented Jan 14, 2026 •
edited by coderabbitai bot
Loading

Close #18

This will also fix FlowingCode/BadgeList#28.

Summary by CodeRabbit

  • Style
    • Updated context menu styling for improved visual consistency in the Day of Week Selector component.
    • Reorganized CSS styling structure for better maintainability.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link

coderabbitai bot commented Jan 14, 2026 •
edited
Loading

Walkthrough

This PR scopes the vaadin-context-menu CSS styling rules to the DayOfWeekSelector component by relocating styling from a global stylesheet to a dedicated CSS file with a scoped theme attribute, preventing unintended styling of context menus in other components.

Changes

Cohort / File(s) Summary
DayOfWeekSelector Java Annotation
src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java		 Added @CssImport annotation for vaadin-context-menu-list-box.css with themeFor = "vaadin-context-menu-list-box" to link scoped stylesheet; updated copyright year to 2023 - 2026
Frontend CSS Reorganization
src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css, src/main/resources/META-INF/frontend/styles/vaadin-context-menu-list-box.css		 Removed context-menu item spacing rules from main stylesheet; introduced new dedicated CSS file with host selector targeting fc-day-of-week-selector-context-menu theme, preserving original padding, display, and gap properties
Frontend TypeScript Theme Binding
src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts		 Added theme="fc-day-of-week-selector-context-menu" attribute to context menu element in render template; updated copyright year to 2023 - 2026

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

Suggested reviewers

  • javier-godoy
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding a theme attribute to the context menu to scope styles, which is the primary objective of the PR.
Linked Issues check ✅ Passed The PR successfully addresses issue #18 by adding theme-scoped CSS rules and issue #28 by preventing style leakage from DayOfWeekSelector affecting other components.
Out of Scope Changes check ✅ Passed All changes directly support the objective of scoping context-menu CSS: theme attribute addition, new CSS file, CSS import annotation, and copyright year updates are all in-scope.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01522ff and 58cd036.

📒 Files selected for processing (4)
  • src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java
  • src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css
  • src/main/resources/META-INF/frontend/styles/vaadin-context-menu-list-box.css
  • src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts
🔇 Additional comments (4)
src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css (1)

1-56: LGTM!

The removal of the global vaadin-context-menu-overlay vaadin-context-menu-list-box::part(items) styles is correct. These styles are now properly scoped in the new vaadin-context-menu-list-box.css file, which addresses the cross-component style leakage issue described in the linked issues.

src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java (1)

48-49: LGTM!

The @CssImport annotation with themeFor = "vaadin-context-menu-list-box" correctly scopes the CSS to the list-box component. This works in conjunction with the theme attribute set in the TypeScript template to ensure styles only apply to this component's context menu.

src/main/resources/META-INF/frontend/styles/vaadin-context-menu-list-box.css (1)

21-25: LGTM!

The scoped CSS implementation is well-designed:

  • The :host([theme~='fc-day-of-week-selector-context-menu']) selector correctly scopes styles to only context menus with this specific theme attribute
  • Using ~= allows the theme to coexist with other theme values
  • The CSS variable with fallback var(--fc-days-of-week-selector-button-space, var(--lumo-space-m)) enables customization while providing sensible defaults
src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts (1)

222-222: LGTM!

The theme="fc-day-of-week-selector-context-menu" attribute correctly identifies this context menu instance. Vaadin's context-menu propagates theme attributes to its internal components (overlay, list-box), allowing the scoped CSS in vaadin-context-menu-list-box.css to match via the :host([theme~='fc-day-of-week-selector-context-menu']) selector.

Please verify the context menu styling is correctly applied when the component renders. This can be confirmed in the browser dev tools by checking that:

  1. The vaadin-context-menu-list-box inside the overlay has the theme="fc-day-of-week-selector-context-menu" attribute
  2. The [part="items"] element has the expected inline-flex display and gap styling

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 14, 2026

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@paodb paodb requested a review from javier-godoy January 14, 2026 15:52
@javier-godoy javier-godoy merged commit 9b6f6f7 into master Jan 15, 2026
5 checks passed
@github-project-automation github-project-automation bot moved this from To Do to Pending release in Flowing Code Addons Jan 15, 2026
@javier-godoy javier-godoy deleted the issue-18 branch January 15, 2026 12:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@javier-godoy javier-godoy javier-godoy approved these changes

Assignees

No one assigned

Labels

None yet

Projects

Flowing Code Addons
Status: Pending release

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Scope context-menu CSS rule to DayOfWeekSelector Vaadin 24: wrong display of overflow badges

3 participants

@paodb @javier-godoy